<template>
  <div id="contsainer"></div>
</template>
<script>
export default {
  data() {
    return {
      viewer: null
    }
  },
  mounted() {
    this.initCesium()
    // 多边形实例
    this.addPolygon(this.viewer)
  },
  methods: {
    initCesium() {
      this.viewer = new Cesium.Viewer('contsainer', {
        animation: false,
        baseLayerPicker: false,
        fullscreenButton: false,
        geocoder: false,
        homeButton: false,
        infoBox: false,
        sceneModePicker: false,
        navigationHelpButton: false,
        scene3DOnly: true,
        timeline: false,
        selectionIndicator: false, //是否显示选取指示器组件
        shouldAnimate: false, //自动播放动画控件
        shadows: true, //是否显示光照投射的阴影
        terrainShadows: Cesium.ShadowMode.RECEIVE_ONLY, //地质接收阴影
        sceneMode: Cesium.SceneMode.SCENE3D
      })
      this.viewer._cesiumWidget._creditContainer.style.display = 'none' //	去除版权信息
    },
    addPolygon(viewer) {
      viewer.entities.add({
        name: 'Blue polygon with holes',
        polygon: {
          hierarchy: {
            //定义多边形及其孔的线性环的层次结构
            positions: Cesium.Cartesian3.fromDegreesArray([-99.0, 30.0, -85.0, 30.0, -85.0, 40.0, -99.0, 40.0]),
            holes: [
              {
                positions: Cesium.Cartesian3.fromDegreesArray([-97.0, 31.0, -97.0, 39.0, -87.0, 39.0, -87.0, 31.0]),
                holes: [
                  {
                    positions: Cesium.Cartesian3.fromDegreesArray([-95.0, 33.0, -89.0, 33.0, -89.0, 37.0, -95.0, 37.0]),
                    holes: [
                      {
                        positions: Cesium.Cartesian3.fromDegreesArray([-93.0, 34.0, -91.0, 34.0, -91.0, 36.0, -93.0, 36.0])
                        // holes: [{ positions: Cesium.Cartesian3.fromDegreesArray([-90.0, 34.0, -90.0, 34.0, -90.0, 36.0, -92.0, 36.0]) }]
                      }
                    ]
                  }
                ]
              }
            ]
          },
          material: Cesium.Color.BLUE.withAlpha(0.8),
          height: 0,
          outline: false,
          closeTop: false, //对于拉伸的图形关闭顶部
          closeBottom: false, //对于拉伸的图形关闭底部
          extrudedHeight: 100000,
          extrudedHeightReference: Cesium.HeightReference.CLAMP_TO_EDGE //对于拉伸的图形贴地，RELATIVE_TO_GROUND 位于地形之上
        }
      })
      viewer.zoomTo(viewer.entities)
    }
  }
}
</script>
<style scoped>
#contsainer {
  height: 100%;
  width: 100%;
  background-color: red;
}
</style>
